<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="opticsCanvas" width="700" height="350"></canvas>
    <script>
        const canvas = document.getElementById('opticsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings to match the image
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;

        // Define layout parameters
        const yAxis = canvas.height / 2;
        const lensHeight = 160;
        const lensWidth = 25; // Half-width from center to the curve's widest point
        const focalDistance = 180;
        
        const x1 = 150;
        const x2 = x1 + focalDistance;
        const x3 = x2 + focalDistance;
        const objectX = 70;

        // Function to draw a biconvex lens
        function drawLens(x) {
            const topY = yAxis - lensHeight / 2;
            const bottomY = yAxis + lensHeight / 2;

            ctx.beginPath();
            // Right arc
            ctx.moveTo(x, topY);
            ctx.quadraticCurveTo(x + lensWidth, yAxis, x, bottomY);
            // Left arc
            ctx.moveTo(x, topY);
            ctx.quadraticCurveTo(x - lensWidth, yAxis, x, bottomY);
            ctx.stroke();
        }

        // Function to draw the object arrow
        function drawObjectArrow(x) {
            const objectHeight = 70;
            const arrowHeadHeight = 18;
            const arrowHeadWidth = 15;
            const stemTopY = yAxis - objectHeight;

            // Draw stem
            ctx.beginPath();
            ctx.moveTo(x, yAxis);
            ctx.lineTo(x, stemTopY);
            ctx.stroke();

            // Draw filled arrowhead
            ctx.beginPath();
            ctx.moveTo(x, stemTopY);
            ctx.lineTo(x - arrowHeadWidth / 2, stemTopY + arrowHeadHeight);
            ctx.lineTo(x + arrowHeadWidth / 2, stemTopY + arrowHeadHeight);
            ctx.closePath();
            ctx.fill();
        }

        // Function to draw the focal length markers
        function drawFocalMarkers() {
            const markerY = yAxis - lensHeight / 2 - 30;
            const tickHeight = 12;

            ctx.beginPath();
            // Marker for first distance 'f'
            ctx.moveTo(x1, markerY - tickHeight / 2);
            ctx.lineTo(x1, markerY + tickHeight / 2);
            ctx.moveTo(x1, markerY);
            ctx.lineTo(x2, markerY);
            ctx.moveTo(x2, markerY - tickHeight / 2);
            ctx.lineTo(x2, markerY + tickHeight / 2);

            // Marker for second distance 'f'
            ctx.moveTo(x2, markerY);
            ctx.lineTo(x3, markerY);
            ctx.moveTo(x3, markerY - tickHeight / 2);
            ctx.lineTo(x3, markerY + tickHeight / 2);
            ctx.stroke();

            // Add the 'f' labels
            ctx.font = 'italic 24px "Times New Roman", serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('f', (x1 + x2) / 2, markerY - 2);
            ctx.fillText('f', (x2 + x3) / 2, markerY - 2);
        }

        // --- Main Drawing Execution ---

        // 1. Draw the principal axis
        ctx.beginPath();
        ctx.moveTo(0, yAxis);
        ctx.lineTo(canvas.width, yAxis);
        ctx.stroke();

        // 2. Draw the three lenses
        drawLens(x1);
        drawLens(x2);
        drawLens(x3);

        // 3. Draw the object arrow
        drawObjectArrow(objectX);

        // 4. Draw the focal distance markers and labels
        drawFocalMarkers();

        // 5. Draw the figure caption
        ctx.font = 'bold 24px "Georgia", serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 1.49', (x2 + x3)/2 - 40, yAxis + lensHeight / 2 + 25);

    </script>
</body>
</html>